<template>
    <button
        class="a-input-switch"
        :disabled="myDisabled"
        :class="[
            `color-${myColor}`,
            `size-${mySize}`,
            { disabled: myDisabled },
            value ? 'true' : 'false',
        ]"
        @click="input(!value)"
    >
        <span class="flag c-circle"></span>
    </button>
</template>

<style lang="scss" scoped>
@use "sass:math";
@import "../scss/vars";

.a-input-switch {
    cursor: pointer;
    border: none;
    outline: none;

    &.false {
        text-align: left;
    }
    &.true {
        text-align: right;
    }

    @each $colorPackageName, $colorPackageValue in $colorPackages {
        $frontColor: map-get($colorPackageValue, "frontColor");
        $bgColor: map-get($colorPackageValue, "bgColor");
        &.color-#{$colorPackageName} {
            &.true {
                background-color: $bgColor;
            }

            &.false {
                background-color: grayscale($bgColor);
            }

            &.disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .flag {
                color: $bgColor;
                background-color: $frontColor;
            }
        }
    }

    @each $sizePackageName, $sizePackageValue in $sizePackages {
        $size: map-get($sizePackageValue, "size");
        &.size-#{$sizePackageName} {
            padding: 2px;
            width: $size * 2;
            height: $size;
            border-radius: math.div($size, 2);

            .flag {
                font-size: map-get($sizePackageValue, "fontSize");
                width: map-get($sizePackageValue, "size") - 4px;
                height: map-get($sizePackageValue, "size") - 4px;
            }
        }
    }

    .flag {
        display: inline-block;
    }
}
</style>

<script>
import inputMixin from "../common/inputMixin"

export default {
    mixins: [inputMixin],
    props: {
        value: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        }
    }
}
</script>